<!DOCTYPE html>
<HTML>
<HEAD>
    <TITLE> ZTREE DEMO - Simple Data</TITLE>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="/zTree/css/demo.css" type="text/css">
    <link rel="stylesheet" href="/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="/zTree/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="/zTree/js/jquery.ztree.core.js"></script>
    <!--  <script type="text/javascript" src="/zTree/js/jquery.ztree.excheck.js"></script>
      <script type="text/javascript" src="/zTree/js/jquery.ztree.exedit.js"></script>-->
    <SCRIPT type="text/javascript">
        <!--
        var setting = {
            data: {
                simpleData: {
                    enable: true,
                    pIdKey: "parentId"
                }
            },
            callback: {
                beforeExpand: zTreeBeforeExpand,
                onCollapse: zTreeOnCollapse,
                onClick: zTreeOnClick
            }
        };

        function zTreeBeforeExpand(treeId, treeNode) {
            var treeObj = $.fn.zTree.getZTreeObj(treeId);
            $.ajax({
                url: "/group/ajax/list",
                type: "post",
                data: {
                    parentId: treeNode.id
                },
                dataType: "json",
                async: false,
                success: function (zNodes) {
                    treeObj.addNodes(treeNode, setNodes(zNodes));
                }
            });
            return false;
        };

        // 移除节点
        function zTreeOnCollapse(event, treeId, treeNode) {
            var treeObj = $.fn.zTree.getZTreeObj(treeId);
            treeObj.removeChildNodes(treeNode);
            if (treeNode.childCount > 0) {
                treeNode.isParent = true;
                treeObj.updateNode(treeNode);
            }
        };

        function zTreeOnClick(event, treeId, treeNode) {
            $("#parentName").val(treeNode.name);
            $("#parentId").val(treeNode.id);
        };

        var zNodes =${zNodes};

        $(document).ready(function () {
            $.fn.zTree.init($("#treeDemo"), setting, setNodes(zNodes));
        });

        // 设置节点父级
        function setNodes(zNodes) {
            for (var i = 0; i < zNodes.length; i++) {
                if (zNodes[i].childCount > 0) {
                    zNodes[i].isParent = true;
                }
            }
            return zNodes;
        }

        //-->
    </SCRIPT>
</HEAD>

<BODY>
<div class="content_wrap">
    <div class="zTreeDemoBackground left">
        <ul id="treeDemo" class="ztree"></ul>
    </div>
    <div class="right">
        <br>
        <div>
            <input type="text" name="name" id="name" value="${(group.name)!}" placeholder="子级部门名称">
            <input type="text" name="parentName" id="parentName" value="${(group.parentName)!}" readonly
                   placeholder="父级部门名称，点击左侧选择" style="width: 200px">
            <input type="hidden" name="parentId" id="parentId" value="${(group.parentId)?string("0")}"
                   placeholder="父级部门id">
            <button onclick="queryGroup(1)">查询</button>
            <button onclick="clearQuery()">清空</button>
        </div>
        <br>
        <div>
            <button onclick="queryGroup(${(paging.pageNum-1)?string("0")})">上一页</button>
            <button onclick="queryGroup(${(paging.pageNum+1)?string("0")})">下一页</button>
        </div>
        <br>
        <div>
        ${(paging.totalRowNum)?string("0")} 条数据，共 ${(paging.totalPageNum)?string("0")} 页
        </div>
    </div>
</div>

<script>
    $(function () {
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
        var node = treeObj.getNodeByTId("");
        if (node != null) {
            $("#parentName").val(node.name);
            $("#parentId").val(node.id);
        }
    })

    function queryGroup(pageNum) {
        var name = $("#name").val();
        var parentId = $("#parentId").val();
        var parentName = $("#parentName").val();
        location.href = '/group/list?pageNum=' + pageNum + '&parentId=' + parentId + '&parentName=' + parentName + '&name=' + name;
    }

    function clearQuery() {
        $("#name,#parentName").val("");
        $("#parentId").val(0);
    }
</script>
</BODY>
</HTML>